<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
</head>

<body>
    <div class="pd20">
        <div class="top flex_x start ">
            <a href="./payment.html"><img src="./static/image/left.png" alt=""></a>
            <span style="margin-left: 10vw;">Payment </span>
        </div>
        <div class="title txt_center">Enter OTP</div>
        <div class="desc txt_center">Please enter the OTP sent to your mobile number</div>
        <div class="list flex_x around">
            <div class="items">
                <input type="password">
            </div>
            <div class="items">
                <input type="password">
            </div>
            <div class="items">
                <input type="password">
            </div>
            <div class="items">
                <input type="password">
            </div>
        </div>
        <div class="desc txt_center" style="margin-top: 89px;">Didn’t receive an OTP?</div>
        <div class="mt_20 t txt_center">
            Resend OTP
        </div>
       <a href="./Confirmation.html"> <div class="submit">Submit</div></a>
    </div>
</body>
<script>
      gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x: 100
    });
    gsap.from(".submit", {
        duration: .5,
        y: 0,
        x: 0,
        height:0
    });
    
</script>
<style>
    
    .items input{
        width: 50px;
    height: 53px;
    padding: 0;
    border-radius: var(--spacing-2, 8px);
        border: none;
        background: none;
        font-size: 54px;
        text-align: center;
    }
    body {
        background-color: #fff;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .pd20 {
        padding: 20px;
        box-sizing: border-box;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .title {
        margin-top: 65px;
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
    }

    .desc {
        margin-top: 33px;
        font-size: 12px;
    }

    .list {
        margin-top: 118px;
    }

    .items {
        width: 50px;
        height: 53px;
        border-radius: var(--spacing-2, 8px);
        background: rgba(228, 227, 227, 0.50);
        text-align: center;
        line-height: 53px;
    }

    .items img {
        width: 14px;
        height: 14px;

    }

    .t {
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        text-decoration: underline;
    }

    .submit {
        margin-top: 60px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-radius: 13px;
        background: #FFEAD4;
        color: #FF8906;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
    }
</style>

</html>